<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
$(function(){
	$('#empltable').datagrid({
		url:'${pageContext.request.contextPath}/selectEmpl',
		columns : [ [ 
		              {field : 'checked',checkbox : true,width : 100}, 
		              {field : 'elId',title : '员工编号',width : 100,hidden : true},
		              {field : 'dId',title : '部门编号',width : 100,hidden : true},
		              {field : 'elName',title : '姓名',width : 100}, 
		              {field : 'elSex',title : '性别',width : 100,sortable:true}, 
		              {field : 'elAge',title : '年龄',width : 100,sortable:true},
		              {field : 'tellphone',title : '电话号码',width : 100,},
		              {field : 'enterTime',title : '入职时间',width : 100,sortable:true},
		              {field : 'dName',title : '所属部门',width : 100,},
		              {field : 'salary',title : '工资/月',width : 100,sortable:true},
		              {field : 'state',title : '是否离职',width : 100,sortable:true},
		              ] ],
		              toolbar: [{
		            	text:'增加',
		          		iconCls: 'icon-add',
		          		handler: function(){
		          			$('#adddiv').dialog('open');
                       }   
		          	},'-',{
		          		text:'删除',
		          		iconCls: 'icon-remove',
		          		handler: function(){
		          			var delempls=[];
		          			var index = $("#empltable").datagrid('getSelections');
		          			if(index.length==0){
		          				$.messager.alert('提示','请选择要删除的数据');
		          			}else{
		          				for(var i=0;i<index.length;i++){
		          					delempls[i]=index[i].elId;
		          				}
		          				$.ajax({
									type:'post',	
									url:'${pageContext.request.contextPath}/delEmpl',
									data:{elId:delempls},
									dataType:'json',
									success:function(data){
										if(data=="1"){
											$.messager.alert('提示','删除成功','info',function(r){
												$('#empltable').datagrid('reload');
					        				});
										}else{
											$.messager.alert('提示','删除失败，删除的数据存在管理员，慎重选择！','info',function(r){
												$('#empltable').datagrid('reload');
					        				});
										}
									}
								});
		          			}
						}
		          	},'-',{
		          		text:'修改',
		          		iconCls: 'icon-edit',
		          		handler: function(){
		          			var empls = $("#empltable").datagrid('getSelections');
		          			if(empls.length!=1){
		          				$.messager.alert('提示','请选择一条数据修改','info',function(r){
		        				});
		          			}else{
		          				$('#updiv').dialog('open');
		          				var empl = empls[0];
								 $('#upEmpl').form('load',empl);
		          			}
					   }
		          	}],
		pagination : true,
	});
//默认增加表单、修改表单是关闭的
		$('#adddiv').dialog('close');
		$('#updiv').dialog('close');
//配置搜索框
	$('#searchEmpl').searchbox({
		searcher : function(value, name) {
				var elName = value;
				if(elName!=""){
				$('#empltable').datagrid('reload', {
				      searchelName:elName
				});
			}else{
				$.messager.alert('提示','输入员工姓名查询')
			}
		}
	});
//配置增加表单
	$('#addEmpl').form({
		url:'${pageContext.request.contextPath}/addEmpl',
		//提交之前需要验证（如果提示文字是非隐藏的则无法提交）
		onSubmit: function () {
			    	if(!$("#promptAddElName").is(":hidden")||!$("#promptAddElAge").is(":hidden")
			    			||!$("#promptAddTellphone").is(":hidden")||!$("#promptAddSalary").is(":hidden")
			    			  ||!$("#promptAddElNameLen").is(":hidden")||!$("#promptAddElAgeLen").is(":hidden")){
			    	$.messager.alert('我的消息','添加失败,不能为空或者格式有误')
			    	return false;
			    }     
			               },
		//通过验证，给出提示信息
		success:function(data){
			if(data=="1"){
				$('#adddiv').dialog('close');
				$("#addEmpl").form('clear');
				//清空增加表单，重新设置离职状态state默认值
				$('#state').textbox({value:'否'})
				$.messager.alert('我的消息','添加成功','info',function(){
					$('#empltable').datagrid('reload');
				});
			}else{
				//提示为空的输入框需要输入值
				$.messager.alert('我的消息','增加失败！','info',function(){
					var addelName=$("#addelName").val();
					var addelSex=$('input[name="elSex"]:checked ').val();
					var addelAge=$("#addelAge").val();
					var addtellphone=$("#addtellphone").val();
					var addenterTimee= $('#addenterTime').datebox('getValue');
					var addsalary=$("#addsalary").val();
					var adddId=$("#cc").val();
					if(addelName==""){
						$("#promptAddElNameNull").show();
					}if(addelSex==null){
						$("#promptAddElSexNull").show();
					}if(addelAge==""){
						$("#promptAddElAgeNull").show();
					}if(addtellphone==""){
						$("#promptAddTellphoneNull").show();
					}if(addenterTimee==""){
						$("#promptAddEntertimeNull").show();
					}if(addsalary==""){
						$("#promptAddSalaryNull").show();
					}if(adddId==null){
						$("#promptDidNull").show();
					}
				});
				 
			}
		}
	});
//配置修改表单
	$('#upEmpl').form({
		url:'${pageContext.request.contextPath}/upEmpl',
		//提交之前需要验证（如果提示文字是非隐藏的则无法提交）
		onSubmit: function () {
			if(!$("#promptUpElName").is(":hidden")||!$("#promptUpElAge").is(":hidden")
	    			||!$("#promptUpTellphone").is(":hidden")||!$("#promptUpSalary").is(":hidden")
	    			  ||!$("#promptUpElNameLen").is(":hidden")||!$("#promptUpElAgeLen").is(":hidden")){
		    	$.messager.alert('我的消息','修改失败,不能为空或者格式有误')
		    	return false;
		    }            
		               },
       //通过验证，给出提示信息
		success:function(data){
			if(data=="1"){
				$('#updiv').dialog('close');
				$.messager.alert('我的消息','修改成功','info',function(){
					$('#empltable').datagrid('reload');
				});
			}else{
				$.messager.alert('我的消息','修改失败,不能为空或者格式有误！','info',function(){
				});
			}
		}
	});
//验证增加员工姓名格式，只能输入汉字
	 $("#addelName").textbox('textbox').bind('blur', function(e){
	        var addelName=$("#addelName").val();
	        if(addelName!=""){
	        	var pattern1=/^[\u4e00-\u9fa5]+$/;
	        	var pattern2=/^[\u4e00-\u9fa5]{1,5}$/;
	 	        var r=addelName.match(pattern1);
	 	        if(r==null){ 
	 	        	$("#promptAddElName").show();
	 	        	$("#promptAddElNameNull").hide();
	 	        }else{
	 	        	$("#promptAddElName").hide();
	 	        	var v=addelName.match(pattern2);
	 	        	if(v==null){
	 	        		$("#promptAddElNameLen").show();
	 	        	}else{
	 	        		$("#promptAddElNameLen").hide();
	 	        		$("#promptAddElNameNull").hide();
	 	        	}
	 	        }
	        }
		});
//性别选择，隐藏提示
	 $(":radio").click(function(){
		 $("#promptAddElSexNull").hide();
	 })
//验证更新员工姓名格式，只能输入汉字
	 $("#upElName").textbox('textbox').bind('blur', function(e){
	        var upElName=$("#upElName").val();
	        if(upElName!=""){
	        	var pattern1=/^[\u4e00-\u9fa5]+$/;
	        	var pattern2=/^[\u4e00-\u9fa5]{1,5}$/;
	 	        var r=upElName.match(pattern1);
	 	        if(r==null){ 
	 	        	 $("#promptUpElName").show();
	 	        }else{
	 	        	$("#promptUpElName").hide();
	 	        	var v=upElName.match(pattern2);
	 	        	if(v==null){
	 	        		$("#promptUpElNameLen").show();
	 	        	}else{
	 	        		$("#promptUpElNameLen").hide();
	 	        	}
	 	        }
	        }
		});
//验证增加员工年龄格式，只能输入正整数
	 $("#addelAge").textbox('textbox').bind('blur', function(e){
	        var addelAge=$("#addelAge").val();
	        if(addelAge!=""){
	        	var pattern1=/^[0-9]*[1-9][0-9]*$/;
	        	var pattern2=/^\d{1,2}$/;
	  	        var r=addelAge.match(pattern1);
	  	        if(r==null){ 
	  	        	$("#promptAddElAge").show();
	  	        	$("#promptAddElAgeNull").hide();
	  	        	$("#promptAddElAgeLen").hide();
	  	        }else{
	  	        	$("#promptAddElAge").hide();
	  	        	$("#promptAddElAgeNull").hide();
	  	        	var v=addelAge.match(pattern2);
	 	        	if(v==null){
	 	        		$("#promptAddElAgeLen").show();
	 	        		$("#promptAddElAgeNull").hide();
	 	        	}else{
	 	        		$("#promptAddElAgeLen").hide();
	 	        	}
	  	        }
	        }
 		});
//验证更新员工年龄格式，只能输入正整数
	 $("#upElAge").textbox('textbox').bind('blur', function(e){
	        var upElAge=$("#upElAge").val();
	        if(upElAge!=""){
	        	var pattern1=/^[0-9]*[1-9][0-9]*$/;
	        	var pattern2=/^\d{1,2}$/;
	  	        var r=upElAge.match(pattern1);
	  	        if(r==null){ 
	  	        	 $("#promptUpElAge").show();
	  	        }else{
	  	        	$("#promptUpElAge").hide();
	  	        	var v=upElAge.match(pattern2);
	 	        	if(v==null){
	 	        		$("#promptUpElAgeLen").show();
	 	        	}else{
	 	        		$("#promptUpElAgeLen").hide();
	 	        	}
	  	        }
	        }
 		});
//验证增加员工电话号码格式
	 $("#addtellphone").textbox('textbox').bind('blur', function(e){
	        var addtellphone=$("#addtellphone").val();
	        if(addtellphone!=""){
	        	var pattern=/^1[34578]\d{9}$/;
	 	        var r=addtellphone.match(pattern);
	 	        if(r==null){ 
	 	        	$("#promptAddTellphone").show();
	 	        	$("#promptAddTellphoneNull").hide();
	 	        }else{
	 	        	$("#promptAddTellphone").hide();
	 	        	$("#promptAddTellphoneNull").hide();
	 	        }
	        }
 		});
//验证更新员工电话号码格式
	 $("#upTellphone").textbox('textbox').bind('blur', function(e){
	        var upTellphone=$("#upTellphone").val();
	        if(upTellphone!=""){
	        	var pattern=/^1[34578]\d{9}$/;
	 	        var r=upTellphone.match(pattern);
	 	        if(r==null){ 
	 	        	 $("#promptUpTellphone").show();
	 	        }else{
	 	        	$("#promptUpTellphone").hide();
	 	        }
	        }
 		});
//选择日期，隐藏提示
	 $('#addenterTime').datebox({
		    onSelect: function(date){
		    	 $("#promptAddEntertimeNull").hide();
		    }
		});
//验证增加员工工资格式
	 $("#addsalary").textbox('textbox').bind('blur', function(e){
	        var addsalary=$("#addsalary").val();
	        if(addsalary!=""){
	        	 var pattern=/^([1-9]\d*(\.\d*[1-9])?)|(0\.\d*[1-9])/;
	 	        var r=addsalary.match(pattern);
	 	        if(r==null){ 
	 	        	 $("#promptAddSalary").show();
	 	        	$("#promptAddSalaryNull").hide();
	 	        }else{
	 	        	$("#promptAddSalary").hide();
	 	        	$("#promptAddSalaryNull").hide();
	 	        }
	        }
 		});
//验证更新员工工资格式
	 $("#upSalary").textbox('textbox').bind('blur', function(e){
	        var upSalary=$("#upSalary").val();
	        if(upSalary!=""){
	        	 var pattern=/^([1-9]\d*(\.\d*[1-9])?)|(0\.\d*[1-9])/;
	 	        var r=upSalary.match(pattern);
	 	        if(r==null){ 
	 	        	 $("#promptUpSalary").show();
	 	        }else{
	 	        	$("#promptUpSalary").hide();
	 	        }
	        }
 		});
//打开修改面板之前，清空提示信息
	 $('#updiv').panel({    
		 onBeforeOpen:function(){    
			 $("#promptUpElName").hide();
			 $("#promptUpElNameLen").hide();
			 $("#promptUpElAge").hide();
			 $("#promptUpElAgeLen").hide();
			 $("#promptUpTellphone").hide();
			 $("#promptUpSalary").hide();
		    }    
		});  
//打开增加面板之前，清空提示信息
	 $('#adddiv').panel({    
		 onBeforeOpen:function(){   
			 $("#promptAddElName").hide();
			 $("#promptAddElNameLen").hide();
			 $("#promptAddElNameNull").hide();
			 $("#promptAddElSexNull").hide();
			 $("#promptAddElAge").hide();
			 $("#promptAddElAgeLen").hide();
			 $("#promptAddElAgeNull").hide();
			 $("#promptAddTellphoneNull").hide();
			 $("#promptAddTellphone").hide();
			 $("#promptAddEntertimeNull").hide();
			 $("#promptDidNull").hide();
			 $("#promptAddSalary").hide();
			 $("#promptAddSalaryNull").hide();
		    }    
		});  

})
//配置增加表单提交事件
function addForm() {
	$('#addEmpl').form('submit');
}
//配置修改表单提交事件
function upForm() {
	$('#upEmpl').form('submit');
}
//配置显示全部信息表单提交事件
function showAllEmpl() {
	$('#empltable').datagrid('reload',{
		});
}

   
</script>
<body>
<!-- 搜索框 -->
<input id="searchEmpl" class="easyui-searchbox"
		data-options="prompt:'输入姓名或部门查询',width:150">
<!-- 显示全部员工按钮 -->
	<a href="javascript:void(0)" class="easyui-linkbutton"
		onclick="showAllEmpl()" style="width: 80px">显示全部</a> 
<!-- 初始员工信息表格 -->
    <form id="emplform">
       <table id="empltable"></table>
    </form>
<!-- 增加员工信息 -->
    <div id="adddiv" class="easyui-dialog" title="增加员工信息" style="width:500px;height:450px;" >
    <div style="margin-left: 110px">
       <form id="addEmpl"method="post">
         <div style="margin-top: 20px">
            <span>员工姓名:</span>
            <input id="addelName" name="elName" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
            <span id="promptAddElName" style="display: none;color: red">只能输入汉字</span> 
            <span id="promptAddElNameLen" style="display: none;color: red">长度超出限制</span> 
            <span id="promptAddElNameNull" style="display: none;color: red">请填写</span> 
         </div>
         <div style="margin-top: 20px">
            <span>员工性别:</span>
		      <input type="radio" id="man" name="elSex" value="男"><span>男</span>
		      <input type="radio" id="woman" name="elSex" value="女"><span>女</span>
		      <span id="promptAddElSexNull" style="display: none;color: red">请选择</span>  
         </div>
         <div style="margin-top: 20px">
            <span>员工年龄:</span>
            <input name="elAge"id="addelAge" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
            <span id="promptAddElAge" style="display: none;color: red">请输入正整数</span> 
            <span id="promptAddElAgeLen" style="display: none;color: red">长度超出限制</span>
            <span id="promptAddElAgeNull" style="display: none;color: red">请填写</span>   
         </div>
          <div style="margin-top: 20px">
            <span>电话号码:</span>
            <input id="addtellphone" name="tellphone"  class="easyui-textbox" data-options="" style="width:150px;height: 28px">
             <span id="promptAddTellphone" style="display: none;color: red">电话号码格式有误</span>
             <span id="promptAddTellphoneNull" style="display: none;color: red">请填写</span>  
         </div>
          <div style="margin-top: 20px">
            <span>入职时间:</span>
            <input id="addenterTime" name="enterTime" class="easyui-datebox" data-options="editable:false"  style="width:150px;height: 28px">
            <span id="promptAddEntertimeNull" style="display: none;color: red">请选择</span>   
         </div>
          <div style="margin-top: 20px">
            <span>工资&nbsp;&nbsp;/月:</span>
            <input id="addsalary" name="salary" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
            <span id="promptAddSalary" style="display: none;color: red">请输入正数</span> 
             <span id="promptAddSalaryNull" style="display: none;color: red">请填写</span> 
         </div>
          <div style="margin-top: 20px;display: none">
            <span>是否离职:</span>
            <input id="state" name="state" value="否" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
         </div>
         <div style="margin-top: 20px">
            <span>所属部门:</span>
            <select id="cc" class="easyui-combobox" name="dId" data-options="editable:false" style="width:150px;height: 28px">   
			    <option value="1">房管部门</option>   
			    <option value="2">餐饮部门</option>   
			    <option value="3">财务部门</option>   
			    <option value="4">后勤部门</option>   
			    <option value="5">人事部门</option>   
			    <option value="6">超级管理员部门</option>
			</select> 
			<span id="promptDidNull" style="display: none;color: red">请选择</span> 
         </div>
       </form>
       </div>
        <div style="margin-left:170px;margin-top:20px; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="addForm()" style="width: 80px">提交</a> 
		</div> 
    </div>
    <!-- 修改员工信息 -->
   <div id="updiv" class="easyui-dialog" title="修改员工信息" style="width:500px;height:480px;" >
   <div style="margin-left: 110px">
      <form id="upEmpl"method="post">
      <div style="margin-top: 20px;display: none">
           <span>员工Id:</span>
           <input name="elId" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
        </div>
       
        <div style="margin-top: 20px">
           <span>员工姓名:</span>
           <input id="upElName"  name="elName" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
           <span id="promptUpElName" style="display: none;color: red">请输入汉字</span>
           <span id="promptUpElNameLen" style="display: none;color: red">长度超出限制</span>  
        </div>
        <div style="margin-top: 20px">
           <span>员工性别:</span>
	      <input type="radio" name="elSex" value="男"><span>男</span>
	      <input type="radio" name="elSex" value="女"><span>女</span>
        </div>
        <div style="margin-top: 20px">
           <span>员工年龄:</span>
           <input id="upElAge"  name="elAge" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
           <span id="promptUpElAge" style="display: none;color: red">请输入正整数</span>
           <span id="promptUpElAgeLen" style="display: none;color: red">长度超出限制</span>   
        </div>
         <div style="margin-top: 20px">
           <span>电话号码:</span>
           <input id="upTellphone"  name="tellphone" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
           <span id="promptUpTellphone" style="display: none;color: red">电话号码格式有误</span> 
        </div>
         <div style="margin-top: 20px">
           <span>入职时间:</span>
           <input id="enterTime" name="enterTime" class="easyui-datebox" data-options="editable:false"  style="width:150px;height: 28px"> 
        </div>
         <div style="margin-top: 20px">
           <span>工资&nbsp;&nbsp;/月:</span>
           <input id="upSalary"  name="salary" class="easyui-textbox" data-options="" style="width:150px;height: 28px">
           <span id="promptUpSalary" style="display: none;color: red">请输入正数</span>  
        </div>
         <div style="margin-top: 20px">
           <span>是否离职:</span>
	      <input type="radio" name="state" value="是"><span>是</span>
	      <input type="radio" name="state" value="否"><span>否</span>
        </div>
        <div style="margin-top: 20px">
           <span>所属部门:</span>
           <select id="cc" class="easyui-combobox" name="dId"data-options="editable:false" style="width:150px;height: 28px">   
		    <option value="1">房管部门</option>   
		    <option value="2">餐饮部门</option>   
		    <option value="3">财务部门</option>   
		    <option value="4">后勤部门</option>   
		    <option value="5">人事部门</option>   
		    <option value="6">超级管理员部门</option>
		</select> 
        </div>
      </form>
      </div>
       <div style="margin-left:170px;margin-top:20px; padding: 5px 0">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			onclick="upForm()" style="width: 80px">提交</a> 
	</div> 
   </div>
</body>
</html>